<template>
	<!-- 帮买取快递废品回收-驿站管理 -->
	<div>
		<!-- 头部 -->
		<el-row>
			<!-- 面包屑 -->
			<el-col>
				<el-breadcrumb separator="/" style="margin-bottom: 10px;">
					<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/help/store' }">帮买取快递废品回收-驿站管理</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<!-- 搜索、操作 -->
			<el-col class="inp">
				<div class="block">
					<span class="demonstration">驿站名称：</span>
					<el-input v-model="select_list.courierStationName" placeholder="请输入要查询的驿站名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">小区名称：</span>
					<el-input v-model="select_list.courierStationCommunityName" placeholder="请输入要查询的小区名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">添加时间：</span>
					<el-date-picker v-model="dataValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="get_value"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="block">
					<el-button type="primary" @click="get_value">搜索</el-button>
				</div>
			</el-col>
			<div class="block" style="margin-bottom: 10px;">
				<el-button type="primary" @click="addNew">添加驿站</el-button>
			</div>
			<!-- 添加表单 -->
			<el-dialog :title="title" :visible.sync="addOrUpdata">
				<el-form :model="addData">
					<el-form-item label="驿站名称" label-width="100px">
						<el-input v-model="addData.courierStationName"></el-input>
					</el-form-item>
					<el-form-item label="驿站图片" label-width="100px">
						<el-input v-model="addData.courierStationImage"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" label-width="100px">
						<el-cascader v-model="addValue" :options="options"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" label-width="100px">
						<el-input v-model="addData.courierStationAddress"></el-input>
					</el-form-item>
					<el-form-item label="所属小区" label-width="100px">
						<el-select v-model="Community_Value" placeholder="请选择所属小区">
							<el-option v-for="item in Community_Data" :key="item.communityId"
								:label="item.communityName + '(' + item.communityProvince + item.communityCity + item.communityDistrict + item.communityAddress + ')'"
								:value="item.communityId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addOrUpdata = false">取 消</el-button>
					<el-button type="primary" @click="makeAdd">确 定</el-button>
				</div>
			</el-dialog>
		</el-row>
		<!-- 主体 -->
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" border style="width: 100%;" :header-cell-style="tableStyle"
				:cell-style="tableCen">
				<el-table-column prop="courierStationId" label="ID">
				</el-table-column>
				<el-table-column prop="courierStationName" label="驿站名字">
				</el-table-column>
				<el-table-column prop="courierStationImage" label="驿站照片">
				</el-table-column>
				<el-table-column prop="courierStationAddress" label="驿站地址">
				</el-table-column>
				<el-table-column prop="courierStationCommunityName" label="所在小区">
				</el-table-column>
				<el-table-column prop="courierStationOrderCount" label="订单总数">
				</el-table-column>
				<el-table-column prop="addTime" label="添加时间" width="160px">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<span style="margin-left: 10px">
							<el-tag :type="scope.row.courierStationStatus==1?'success':'danger'">
								{{ scope.row.courierStationStatus==1?'上架中':'已下架' }}
							</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="danger" :underline="false"
							@click="modif_Status(scope.row.courierStationId, scope.row.courierStationStatus)">
							{{ scope.row.courierStationStatus==1?'立即下架':'立即上架' }}
						</el-link>&nbsp;&nbsp;
						<el-link type="danger" :underline="false" @click="modifyData(scope.row)">编辑</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<!-- 分页 -->
		<el-row style="text-align: center; margin-top: 20px;">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="select_list.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="select_list.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="select_list.total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../../assets/data/citydata.js'
	export default {
		data() {
			return {
				// 查询显示条件
				select_list: {
					courierStationCommunityName: '',
					courierStationName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					total: 1
				},
				// 搜索时间差
				dataValue: '',
				// 表格数据
				tableData: [], // 级联地址数据
				options: citys,
				// 添加数据
				addData: {
					addTime: "", //营业时间
					courierStationAddress: "", //详细位置
					courierStationCity: "", //市
					courierStationCommunityId: '', //关联小区ID
					courierStationCommunityName: "", //所在小区
					courierStationDistrict: "", //区
					courierStationId: '', //驿站ID
					courierStationImage: "", //图片
					courierStationName: "", //驿站名称
					courierStationOrderCount: 0, //订单总数
					courierStationProvince: "", //省
					courierStationSort: 1,
					courierStationStatus: 1, //上架状态
				},
				// 弹出窗口
				title: '新增门店', //窗口标题
				addOrUpdata: false, //窗口显示与否
				addValue: [],
				// 所属小区数据
				Community_Data: [],
				Community_Data_Show: {
					"pageNum": 1,
					"pageSize": 9999999,
					"size": 64,
					"startRow": 1,
					"endRow": 64,
					"total": 64,
					"pages": 1,
				},
				Community_Value: '',
				// 样式
				tableStyle: {
					'background-color': '#409eff',
					'color': 'white',
					'text-align': 'center'
				},
				tableCen: {
					'text-align': 'center'
				}
			}
		},
		methods: {
			// 添加操作
			addNew() {
				this.addData = {}
				this.addValue = []
				this.title = '新增驿站'
				this.addOrUpdata = true
				this.get_Community_Value()
			},
			// 修改数据
			modifyData(data) {
				// console.log(data)
				this.addData = data
				// console.log(this.addData)
				this.title = '修改驿站'
				this.addValue = [data.courierStationProvince, data.courierStationCity, data.courierStationDistrict]
				this.Community_Value = data.courierStationCommunityName
				this.addOrUpdata = true
			},
			// 修改状态
			modif_Status(id, status) {
				// console.log(id + status)
				status == 1 ? status = 0 : status = 1
				this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/courierStation/modifyCourierStation', {
					'courierStationId': id,
					'courierStationStatus': status
				});
				this.get_value()
			},
			// 添加操作
			makeAdd() {
				let link = 'http://43.143.190.87:8091/panghudaojiaBackend/courierStation/addCourierStation'
				let mess = '数据添加'
				if (this.title == '修改驿站') {
					link = 'http://43.143.190.87:8091/panghudaojiaBackend/courierStation/modifyCourierStation'
					mess = '数据修改'
				}
				this.$http.post(link, this.addData)
					.then((res) => {
						if (res.data.status == 200) {
							this.$message.success(mess + '成功')
							this.get_value()
						} else {
							this.$message.error(mess + '失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
				this.addOrUpdata = false
			},
			// 获取数据
			get_value() {
				this.$http.get(
						'http://43.143.190.87:8091/panghudaojiaBackend/courierStation/querySearchCourierStationList', {
							params: this.select_list,
						})
					.then((res) => {
						// console.log(res.data.data.list)
						if (res.status == 200) {
							this.tableData = res.data.data.list
							this.select_list.total = res.data.data.total
						} else {
							this.$message.error('数据获取失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 获取关联小区列表
			get_Community_Value() {
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/community/communityList', {
						params: this.Community_Data_Show
					})
					.then((res) => {
						// console.log(res.data.data.total)
						this.Community_Data = res.data.data.list
						this.Community_Data_Show.total = res.data.data.total
					})
			},
			// 每页条数改变
			handleSizeChange(size) {
				this.select_list.pageSize = size
				this.get_value()
			},
			// 页码改变
			handleCurrentChange(num) {
				this.select_list.pageNum = num
				this.get_value()
			},
		},
		mounted() {
			this.get_value()
		},
		watch: {
			// 监听搜索日期变化
			dataValue(newdata) {
				this.select_list.startTime = newdata[0]
				this.select_list.endTime = newdata[1]
			}
		},
	}
</script>

<style>
	.inp {
		margin-bottom: 10px;
		display: flex;
		flex-flow: wrap;
		justify-content: start;
	}

	.inp .block {
		margin-top: 10px;
		margin-right: 20px;
	}

	.classify {
		width: 300px;
		display: flex;
		flex-flow: nowrap;
		justify-content: space-around;
	}

	.classify .active {
		color: #00ffff;
	}
</style>